import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,TextInput,
    Platform
} from 'react-native';
import pxToDp from '../common/comm';
import ModalDropdown from 'react-native-modal-dropdown';
import * as DATA from '../data/data';

export default class AccountBank extends Component {
  static navigationOptions={
    headerTintColor:'#fff',
    headerTitle: '完善渠道',
    headerStyle: {
      backgroundColor: '#36ad50',
        height:Platform.OS === 'android'?pxToDp(84):pxToDp(110)
    },
    headerTitleStyle: {
      color: '#fff',
      fontSize: pxToDp(34),
        marginLeft:Platform.OS === 'android'?pxToDp(185):null
    },
    gesturesEnabled :true
  }
  render() {
    return (
      <ScrollView
        contentContainerStyle={styles.contentContainer}
        keyboardDismissMode='on-drag'
      > 
        <View>
          <View style={styles.row}>
            <Text style={[styles.title, { marginLeft: pxToDp(25) }]}>银行卡号：</Text>
            <TextInput keyboardType='numeric' autoFocus={true} underlineColorAndroid="transparent" style={styles.input} value={DATA.user.user.bankaccount}></TextInput>
          </View>  
          <View style={styles.row}>
            <Text style={[styles.title,{marginLeft:pxToDp(25)}]}>开户行：</Text>
            <ModalDropdown
              textStyle={styles.btnText}
              style={styles.btn}
              dropdownStyle={styles.down}
              defaultValue={DATA.user.user.bank}
              options={DATA.bankNames}
          />
          </View>  
          <View style={styles.row}>
            <Text style={[styles.title, { marginLeft: pxToDp(25) }]}>姓      名：</Text>
            <TextInput underlineColorAndroid="transparent" style={[styles.input, { marginLeft: pxToDp(10) }]} value={DATA.user.user.nickname}></TextInput>
          </View>  
        </View>  
        <Text style={{marginTop:pxToDp(50)}}>注：请如实填写真实信息，有助于日后提现</Text>
        <Text style={styles.submit}>提交</Text>  
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
    contentContainer: {
      paddingVertical: 20,
      alignItems:'center'
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: pxToDp(1),
    borderBottomColor: '#ddd',
    height:pxToDp(100)
    },
  btn: {
    width: pxToDp(340),
    borderWidth: 1,
    borderColor: '#a3a3a3',
    paddingLeft: pxToDp(10),
    borderRadius: pxToDp(10),
    marginLeft:pxToDp(20)
  },
  btnText: {
    fontSize: pxToDp(24),
    color:'#a3a3a3'
  },
  down: {
    width:pxToDp(330)
  },
  title: {
    fontWeight: 'bold',
    fontSize:pxToDp(26)
  },
  input: {
    width: pxToDp(450),
    fontSize:pxToDp(26)
  },
  submit: {
    width: pxToDp(400),
    height: pxToDp(70),
    backgroundColor: '#36ad50',
    color: '#fff',
    textAlign: 'center',
    textAlignVertical: 'center',
    borderRadius: pxToDp(50),
    fontSize: pxToDp(34),
    marginTop:pxToDp(100)
  }
  });
